/* K线图组件样式 */
.klineChartContainer {
    position: relative;
    overflow: hidden;
}

/* 控制栏样式 */
.klineChartControls {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

.chartTitle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chartTitle span {
    font-size: 14px;
    font-weight: 500;
    color: var(--adm-color-text, #333);
}

/* 图表容器 - 支持横向滚动 */
.klineChartWrapper {
    position: relative;
    width: 100%;
}

/* 合并后的图表区域 */
.chartSection {
    position: relative;
    width: 100%;
    height: 500px; /* 设置固定高度 */
    overflow: hidden; /* 隐藏所有滚动条，让ECharts内部处理拖拽 */
    border: 1px solid var(--adm-color-border, #e8e8e8);
}

/* MA显示区域 */
.maDisplay {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 10;
    display: flex;
    gap: 16px;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}

.maItem {
    color: var(--adm-color-text-secondary, #666);
    font-weight: 500;
}

.maItem.ma5 {
    color: #fbbf24;
}

.maItem.ma20 {
    color: #8b5cf6;
}

.maItem.ma250 {
    color: #06b6d4;
}

/* MA控制按钮区域 */
.maControls {
    position: relative;
    padding: 8px 0;
    /* border-top: 1px solid var(--adm-color-border, #f0f0f0); */
    background: var(--adm-color-background, #ffffff);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 固定位置的tooltip - 显示在MA区域上方 */
.fixedTooltip {
    border: 1px solid var(--adm-color-border, #e8e8e8);
    border-bottom: none;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--adm-color-text, #000);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tooltipRow {
    display: flex;
    justify-content: space-between;
    margin: 2px 0;
}

.tooltipRow span {
    flex: 1;
    text-align: left;
}

.tooltipRow span:last-child {
    text-align: right;
    margin-left: 16px;
}





/* Webkit 滚动条样式 */
.chartSection::-webkit-scrollbar {
    height: 24px; /* 增加滚动条高度 */
}

.chartSection::-webkit-scrollbar-track {
    background: var(--adm-color-fill, #f5f5f5);
    border-radius: 6px; /* 增加圆角 */
    margin: 0 4px; /* 添加左右边距 */
}

.chartSection::-webkit-scrollbar-thumb {
    background: var(--adm-color-primary, #1677ff); /* 使用主题色 */
    border-radius: 6px; /* 增加圆角 */
    transition: background 0.2s;
    min-width: 30px; /* 设置最小宽度 */
}

.chartSection::-webkit-scrollbar-thumb:hover {
    background: var(--adm-color-primary-hover, #0958d9); /* 悬停时更深的颜色 */
}

.chartSection::-webkit-scrollbar-thumb:active {
    background: var(--adm-color-primary-active, #0741a6); /* 点击时的颜色 */
}

/* 保留原有的wrapper滚动条样式（如果需要） */
.klineChartWrapper::-webkit-scrollbar {
    height: 6px;
}

.klineChartWrapper::-webkit-scrollbar-track {
    background: var(--adm-color-fill, #f5f5f5);
    border-radius: 3px;
}

.klineChartWrapper::-webkit-scrollbar-thumb {
    background: var(--adm-color-border, #d9d9d9);
    border-radius: 3px;
    transition: background 0.2s;
}

.klineChartWrapper::-webkit-scrollbar-thumb:hover {
    background: var(--adm-color-text-secondary, #999);
}



/* 图表主体 */
.klineChart {
    position: relative;
    width: 100%;
    height: 100%;
    /* 移除最小宽度限制，让图表完全适应容器 */
    /* 图表内容通过ECharts的dataZoom来处理拖拽和缩放 */
}

/* 自定义Tooltip样式 */
.customTooltip {
    position: absolute;
    background: var(--adm-color-background, #fff);
    border: 1px solid var(--adm-color-border, #e8e8e8);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.4;
    z-index: 1000;
    min-width: 160px;
    max-width: 200px;
    color: var(--adm-color-text, #000);
    user-select: none;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.customTooltip>div {
    margin: 2px 0;
}

.customTooltip>div:first-child {
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--adm-color-border, #f0f0f0);
}

/* 加载遮罩 */
.loadingMask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--adm-color-text-secondary, #999);
    font-size: 14px;
    z-index: 100;
    background: var(--adm-color-background, rgba(255, 255, 255, 0.8));
    padding: 8px 16px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 无障碍辅助 */
.klineChartContainer:focus-within {
    outline: 2px solid var(--adm-color-primary, #1677ff);
    outline-offset: 2px;
}

.customTooltip {
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:global([data-theme='dark']) .chartTitle span {
    color: var(--adm-color-text, #fff);
}

:global([data-theme='dark']) .klineChartControls {
    border-bottom-color: #333;
    background: var(--adm-color-background, #1a1a1a);
}

:global([data-theme='dark']) .klineChartContainer {
    background: var(--adm-color-background, #1a1a1a);
}

:global([data-theme='dark']) .maControls {
    border-top-color: #333;
    background: var(--adm-color-background, #1a1a1a);
}

:global([data-theme='dark']) .maItem {
    color: var(--adm-color-text-secondary, #999);
}

:global([data-theme='dark']) .loadingMask {
    color: var(--adm-color-text-secondary, #666);
    background: rgba(26, 26, 26, 0.8);
}

:global([data-theme='dark']) .customTooltip>div:first-child {
    border-bottom-color: #444;
}

:global([data-theme='dark']) .customTooltip {
    background: rgba(51, 51, 51, 0.95);
    border-color: var(--adm-color-border, #555);
    color: var(--adm-color-text, #fff);
}

/* 暗色主题下的固定tooltip */
:global([data-theme='dark']) .fixedTooltip {
    background: rgba(26, 26, 26, 0.95);
    border-color: var(--adm-color-border, #555);
    color: var(--adm-color-text, #fff);
}

:global([data-theme='dark']) .klineChartWrapper::-webkit-scrollbar-track {
    background: #2a2a2a;
}

:global([data-theme='dark']) .klineChartWrapper::-webkit-scrollbar-thumb {
    background: #555;
}

:global([data-theme='dark']) .klineChartWrapper::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* 暗色主题下的chartSection滚动条样式 */
:global([data-theme='dark']) .chartSection::-webkit-scrollbar-track {
    background: #2a2a2a;
}

:global([data-theme='dark']) .chartSection::-webkit-scrollbar-thumb {
    background: var(--adm-color-primary, #1677ff);
}

:global([data-theme='dark']) .chartSection::-webkit-scrollbar-thumb:hover {
    background: var(--adm-color-primary-hover, #0958d9);
}

:global([data-theme='dark']) .chartSection::-webkit-scrollbar-thumb:active {
    background: var(--adm-color-primary-active, #0741a6);
}